<template>
  <div class="shopcar"> 
    <h2 class="header">{{title}}</h2>
     <div class="list">
          <dl v-for="(item, index) in shopcarlist" :key="index">
            <dt><img :src="item.img" alt="" @click="detal(item.pid)"></dt>
            <dd>
              <h3>{{item.pname}}</h3>
              <p class="des">{{item.des}}</p>
              <span class="mode">{{item.mode}}</span>
              <p class="price">￥{{item.price}}</p>
              <div class="fun">
                <button class="del" @click="delcount(index)">-</button>
                <div class="count">{{item.count}}</div>
                <button class="add" @click="addcount(index)">+</button>
              </div>
            </dd>
          </dl>
         
        </div>
      <div class="zong">
        <span><input type="checkbox">全选</span>
      <span>总价：0</span>
      </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { Dialog,SubmitBar } from 'vant';
Vue.use(SubmitBar);
import { mapState } from "vuex";
export default {
  data() {
    return {
      title:"",
    }
  },
  mounted(){
      document.title = this.$route.meta.title;
      this.title=document.title
  },
   computed:{
    ...mapState({
      shopcarlist:(store)=>store.home.shopcarlist
    })
  },
  methods: {
    addcount(index){
      this.shopcarlist[index].count++
    },
    delcount(index){
      this.shopcarlist[index].count--
      if (this.shopcarlist[index].count<=0) {
        this.shopcarlist[index].count=1
         Dialog.confirm({
        title: '确定删除此物品吗',
      })
        .then(() => {
          // on confirm
          this.shopcarlist.splice(this.shopcarlist[index],1);
        })
        .catch(() => {
          // on cancel
           
        });
          }
        },
      }
     
}
</script>

<style lang="scss">
  .shopcar{
    width: 100%;
    height: 95%;
    display: flex;
    flex-direction: column;
    .header{
    width: 100%;
    height: .9rem;
    // background: #fff;
    // position: fixed;
    // top: 0;
    }
    .list{
      flex: 1;
      overflow: auto;
      dl{
        width:100%;
        height: 3rem;
        display: flex;
        margin-top: 10px;
        dt{
          width: 40%;
          height: 100%;
          margin-left: 10px;
          img{
            width: 100%;
            height: 100%;
          }
        }
        dd{
          width: 60%;
          height: 100%;
          // padding: 10px;
          position: relative;
          .des{
            font-size: 12px;
            color: #9B9B9B;
            margin-top: 6px;
          }
          .mode{
            margin-top: 10px;
            width: 30px;
            height: 18px;
            display: block;
            background: orange;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 3px;
          }
          .price{
            font-size: 17px;
            color: red;
            font-weight:600;
            margin-top: 50px;
          }
          .addcart{
            width: 30px;
            height: 30px;
            background: red;
            position: absolute;
            bottom: 15px;
            right: 10px;
            color: white;
            font-size: 18px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          .fun{
            width: 60px;
            height: 25px;
            display: flex;
            position: absolute;
            right: 10px;
            bottom: 10px;
            .add{
              width: 33.3%;
              height: 100%;
              font-size: 16px;
              display: flex;
              justify-content: center;
              align-items: center;
              border-radius: 50%;
              border: none;
              background: #fff;
              font-weight: 500;
              border: 1px solid #000;
            }
            .count{
               width: 33.3%;
              height: 100%;
              font-size: 16px;
              display: flex;
              justify-content: center;
              align-items: center;
            }
            .del{
              width: 33.3%;
              height: 100%;
              font-size: 16px;
              display: flex;
              justify-content: center;
              align-items: center;
              border-radius: 50%;
              border: none;
              background: #fff;
              font-weight: 500;
              border: 1px solid #000;
          
            }
          }
        }
      }
    }
    .zong{
      width: 100%;
      height: .9rem;
    line-height: .9rem;
    text-align: center;
    span{
      margin:6px;
    }
    }
  }
</style>